
<style type='text/css'>
#poster {
        width:320px;height:580px;border:1px solid #ccc;position:relative
}
   #poster .bg { position:absolute;width:100%;left:0;z-index:0}
   
   #poster .drag {position: absolute; width:80px;height:80px;}
   #poster .drag.selected,
   #poster .drag:hover {
		border: 2px dashed #00a0e9;
	}
	#poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }
    #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #poster .drag img {position:absolute;z-index:0;width:100%;left:0; }
#poster .drag .btn-edit-del {
    width: 34px;
    height: 17px;
    right: 0;
    top: 0;
    background: url(../core/resource/images/diy/remove.png) no-repeat top center;
    cursor: pointer;
	position: absolute;
    z-index: 99;
}
   
th,td {
	text-align:left
}
</style>
<div class="col-jy" style="width:100%">
    <div class="col-sm-12">
        <div style='width:100%;'>
           <div style='width:320px;padding:10px;' valign='top'>
                    <div id='poster' style="height:auto;min-height:425px;">
                        <img ng-if="{tovalue}.{name}.image!=null && {tovalue}.{name}.image!=''" ng-src='{{tomedia({tovalue}.{name}.image)}}' class='bg'/>  
						<div ng-if="{tovalue}.{name}.data" >
                         <div ng-class="{'drag':1,'selected':pagedata.nowindex==$index}" type="{{d.type}}" ng-repeat="(key,d) in {tovalue}.{name}.data" ng-click="pagedata.abc($index)" style="z-index:{{key+1}};left:{{d.left}}px; top:{{d.top}}px; width:{{d.width}}px;height:{{d.height}}px"  > 
                            <div class="btn-edit-del" ng-if="pagedata.nowindex==$index" ng-click="{tovalue}.{name}.data.splice($index,1)"></div>
							<img  ng-if="d.type=='qr'"  src="../addons/jy_scrm/resource/images/qr.jpg" />
                            <img ng-if="d.type=='head'"  src="../addons/jy_scrm/resource/images/head.jpg" />
							<img ng-if="d.type=='img'" src="../addons/jy_scrm/resource/images/img.jpg" />
							<img ng-if="d.type=='thumb'" src="../core/resource/images/diy/53.jpg"/>
							<img ng-if="d.type=='head'"  src="../addons/jy_scrm/resource/images/head.jpg" />
                            <div  ng-if="d.type=='nickname'" ng-class="{'bold':d.bold}" style="font-size:{{d.size}}px;color:{{d.color}}">昵称</div> 
							<div  ng-if="d.type=='title'" ng-class="{'bold':d.bold}" style="font-size:{{d.size}}px;color:{{d.color}}">奖品名称</div> 
							<div  ng-if="d.type=='text'" ng-class="{'bold':d.bold}" style="font-size:{{d.size}}px;color:{{d.color}}">{{d.value || '自定义文字'}}</div>  
						 </div>                    
                        </div>
                    </div>
             </div>
                <div valign='top' style='padding:10px;'>
                    <div class='panel panel-default form-horizontal'>
                        <div class='panel-body'>
							<div class="form-group">
								<div class="col-md-2">
									<div class="input-group">
										<span class="input-group-btn">
											<button class="btn btn-primary" type="button" ng-click="{tovalue}.{name}={pagevalue}.{datademo}">重置默认设计</button>
										</span>
									</div>
									<div class="help-block">重置到默认设计方案</div>
								</div>
							</div>
							<div class="form-group js-qrcode-show">
								<label class="col-xs-12 col-sm-3 col-md-2 left-label ng-binding">预览二维码</label>
								<div class="col-sm-9 col-xs-12 ">
									<div class="l" style="margin-top:6px;margin-right:6px" id="qrcode-url" ng-init="tool.qr(pagedata.item.url,'qrcode-url',120)"></div>
									<div class="l help-block" style="width:100%">预览的是默认第一个带图片商品的海报效果，如果没有商品，可能预览不了！</div>
								</div>
							</div>
                            <div class="form-group">
									<label class="col-xs-12 col-sm-3 col-md-2 left-label">背景图片</label>
									<div class="col-xs-12 col-sm-8 col-md-10">
										<div class="input-group">
											<input type="text" ng-model="{tovalue}.{name}.image" class="form-control ng-pristine ng-valid ng-touched" autocomplete="off">
											<span class="input-group-btn" ng-show="false==false">
												<button class="btn btn-primary btn-sm" type="button" ng-click="image({tovalue}.{name},'image')">选择图片</button>
											</span>
										</div>
										<div class="input-group" style="margin-top:.5em;">
											<img ng-src="{{tomedia({tovalue}.{name}.image) || '../core/resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail" width="150" src="../core/resource/images/nopic.jpg">
										</div>
										<div class="help-block">（背景图片尺寸建议640*1008）</div>		
									</div>
								
							</div>
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 col-md-2 left-label">添加元素</label>
                                <div class="col-xs-12 col-sm-8 col-md-10">
                                    <button ng-repeat="(key,item) in {pagevalue}.{datatypes}" class='btn btn-default btn-com' style="margin-right:5px" type='button' ng-click="pagedata.adddata(key);pagedata.settype = key">{{item}}</button>
									<div class="help-block">点击添加不同的元素</div>
                                </div>
                            </div>
						</div>
                        </div>
						<div ng-if="pagedata.settype" class='panel panel-default form-horizontal'>
                        <div class='panel-body'>
							<div class="form-group" ng-if="pagedata.settype == 'text'">
								<label class="col-sm-2 left-label">文字内容</label>
								<div class="col-sm-10">
									<input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].value" class="form-control" placeholder="例如: 扫码或长按二维码"  />
								</div>
                            </div>
							<div class="form-group">
								<label class="col-sm-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>左边距离</label>
								<div class="col-sm-10">
									<div class='input-group'>
													<input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].left" class="form-control namesize" placeholder="例如: 10"  />
													<div class='input-group-addon'>px</div>
									</div>
								</div>
                            </div>
							<div class="form-group">
								<label class="col-sm-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>顶部距离</label>
								<div class="col-sm-10">
									<div class='input-group'>
													<input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].top" class="form-control namesize" placeholder="例如: 10"  />
													<div class='input-group-addon'>px</div>
									</div>
								</div>
                            </div>
							<div class="form-group">
								<label class="col-sm-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>宽</label>
								<div class="col-sm-10">
									<div class='input-group'>
													<input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].width" class="form-control namesize" placeholder="例如: 150,180"  />
													<div class='input-group-addon'>px</div>
									</div>
								</div>
                            </div>
							<div class="form-group">
								<label class="col-sm-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>高</label>
								<div class="col-sm-10">
									<div class='input-group'>
													<input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].height" class="form-control namesize" placeholder="例如: 150,180"  />
													<div class='input-group-addon'>px</div>
									</div>
								</div>
                            </div>
								<div ng-if="pagedata.settype != 'head' &&  pagedata.settype != 'qr' && pagedata.settype != 'img' && pagedata.settype != 'thumb'" class="form-group">
									<div class="col-xs-12 col-sm-3 col-md-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>颜色</div>
									<div class="col-xs-12 col-sm-8 col-md-10">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" ng-model="{tovalue}.{name}.data[pagedata.nowindex].color" type="color" />
											<span class="input-group-addon btn btn-info" ng-click="{tovalue}.{name}.data[pagedata.nowindex].color=''">清除</span>
										</div>
										<div class="help-block">颜色</div>
									</div>
								</div>
                                <div ng-if="pagedata.settype != 'head' &&  pagedata.settype != 'qr' && pagedata.settype != 'img' && pagedata.settype != 'thumb'" class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>大小</label>
                                    <div class="col-xs-12 col-sm-8 col-md-10">
                                        <div class='input-group'>
                                            <input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].size" class="form-control namesize" placeholder="例如: 14,16"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
										<div class="help-block">只需填数字</div>
                                    </div>
                                </div>
								<div ng-if="pagedata.settype != 'head' &&  pagedata.settype != 'qr' && pagedata.settype != 'img' && pagedata.settype != 'thumb'" class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 left-label"><red>{{{pagevalue}.{datatypes}[pagedata.settype]}}</red>是否加粗？</label>
                                    <div class="col-xs-12 col-sm-8 col-md-10">
                                        <label class="right-label">
											<div ng-show="{tovalue}.{name}.data[pagedata.nowindex].bold==1" class="switch switchOn" ng-click="{tovalue}.{name}.data[pagedata.nowindex].bold=0"></div>
											<div ng-show="{tovalue}.{name}.data[pagedata.nowindex].bold!=1" class="switch" ng-click="{tovalue}.{name}.data[pagedata.nowindex].bold=1"></div>
										</label>
                                    </div>
                                </div>
							<div class="form-group" ng-if="pagedata.settype =='img'">
                                <label class="col-xs-12 col-sm-3 col-md-2 left-label">图片设置</label>
									<div class="col-xs-12 col-sm-8 col-md-10">
										<div class="input-group">
											<input type="text" ng-model="{tovalue}.{name}.data[pagedata.nowindex].src" class="form-control ng-pristine ng-valid ng-touched" autocomplete="off">
											<span class="input-group-btn" ng-show="false==false">
												<button class="btn btn-primary" type="button" ng-click="image(pagedata.data.data[pagedata.nowindex],'src')">选择图片</button>
											</span>
										</div>
										<div class="input-group" style="margin-top:.5em;">
											<img ng-src="{{tomedia({tovalue}.{name}.data[pagedata.nowindex].src) || '../core/resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail" width="150" src="../core/resource/images/nopic.jpg">
										</div>
										<div class="help-block">（图片尺寸建议320*320）</div>		
									</div>
                            </div>

                        </div>
                    </div>
                   
            </div>
        </div>
    </div>	
</div>
<script language='javascript'>
scope.pagedata.abc=function(index){
	scope.pagedata.settype=scope.{tovalue}.{name}.data[index].type;
	scope.pagedata.nowindex=index;
	scope.$applyAsync();
}
scope.pagedata.adddata=function(type){
	scope.{tovalue}.{name}.data.push(scope.{pagevalue}.{datapushs}[type]);
	scope.pagedata.nowindex=scope.{tovalue}.{name}.data.length-1;
	scope.$applyAsync();
}
</script>